<template>
  <view class="index-withd">
    <view class="top">
      <u-cell :title="$t('withdrawal.tiXianZ')" :border="false" :isLink="true">
        <!-- <u-switch slot="right-icon" v-model="checked"></u-switch> -->
        <view slot="value" class="top-right">
          <!-- <view>
            <image src="/static/images/icon/yh.png" class="yh" />
          </view>
          <view>招商银行(1234)</view> -->
          <picker @change="bankPickerChange" :value="defaultIndex" :range="bankTypeList" range-key="bankDeposit" class="picker-wrap" v-if="bankTypeList.length > 0 ">
            <view class="picker">
              <view>
                <image :src="bankTypeList[defaultIndex].bankLogoUrl" class="yh" />
              </view>
              <view>{{ bankTypeList[defaultIndex].bankDeposit}}</view>
              <view>{{ bankTypeList[defaultIndex].bankNumber || ''}}</view>
            </view>
          </picker>
          <view v-else @click="toAddBankList">{{ $t('bank.tianJiaYhK') }}</view>
        </view>
      </u-cell>
    </view>
    <view class="content">
      <view class="title">{{ $t('withdrawal.tiXianJe') }}</view>
      <view class="content-input">
        <u-input placeholder="请输入内容" border="bottom" v-model="price" type="number">
          <text slot="prefix">￥</text>
          <text slot="suffix" class="all" @click="allWithdrawal">{{ $t('withdrawal.quanBuTx') }}</text>
        </u-input>
      </view>
      <view class="bottom">{{ $t('withdrawal.keTiXjE') }} ¥{{ mountMoney }}</view>
    </view>

    <view class="tips">
      <view>{{ $t('withdrawal.wenXinTs') }}：</view>
      <view>{{ $t('withdrawal.tiXianSqDzsJ') }}</view>
    </view>

    <view class="w-button" @click="withdrawal">{{ $t('withdrawal.tiXian') }}</view>
  </view>
</template>

<script>
export default {
  computed: {
    imgPath() {
      return this.$config.baseURL + "/static/front";
    },
  },
  data() {
    return {
      price: 1,
      pageNum: 1,
      defaultIndex: 0,
      pageSize: 100,
      mountMoney: 0,
      bankTypeList: [],
    };
  },
  onLoad() {
    this.getUserInfo();
    this.bannerImg = this.imgPath + "/images/mine_banner_bg.png";
    this.crashIcon = this.imgPath + "/images/icon/crash.png";
  },
  onShow() {
    this.getUserCardList();
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("withdrawal.tiXian"),
    });
  },
  methods: {
    async getUserInfo() {
      const res = await this.$api.getPersonalInformation({});
      if (res.code === 0) {
        this.mountMoney = res.data.mountMoney || 0;
      }
    },
    async getUserCardList() {
      const res = await this.$api.userCardList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
      if (res.code === 0) {
        this.bankTypeList = res.data.list;
      }
    },
    bankPickerChange(e) {
      this.defaultIndex = e.detail.value;
    },
    allWithdrawal() {
      this.price = this.mountMoney;
    },
    /**
     * 添加银行卡
     */
    toAddBankList() {
      uni.navigateTo({
        url: "/pages/card_list/card_list",
      });
    },
    async withdrawal() {
      if (
        !this.bankTypeList[this.defaultIndex] ||
        !this.bankTypeList[this.defaultIndex].id
      ) {
        return uni.$u.toast(this.$t('withdrawal.xuanZeYhK'));
      }
      const params = {
        cardId: this.bankTypeList[this.defaultIndex].id,
        withdraw: this.price,
      };
      const res = await this.$api.saveUserWithdraw(params);
      if (res.code === 0) {
        uni.$u.toast(this.$t('withdrawal.tiXianCg'));
        uni.navigateTo({
          url:
            "/pages/withdrawal_detail/withdrawal_detail?orderNumber=" +
            res.data,
        });
      }
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #f6f6f6 !important;
}
</style>
<style lang="scss" scoped>
/deep/ .u-cell__body {
  height: 60px;
}
.index-withd {
  width: 100%;
  overflow: hidden;
  padding-bottom: 40px;
  .top {
    height: 60px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px;
    width: calc(100% - 20px);
    margin: 20px auto 0;
    .top-right {
      display: flex;
      .yh {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }
  }
  .content {
    height: 180px;
    background-color: #fff;
    width: calc(100% - 20px);
    margin: 20px auto 0;
    border-radius: 10px;
    .title {
      height: 80px;
      line-height: 80px;
      padding-left: 20px;
      color: #333;
    }
    .content-input {
      padding: 0 20px;
      .all {
        font-size: 14px;
        color: #75cecc;
      }
    }
    .bottom {
      font-size: 14px;
      padding: 20px 0 0 20px;
      color: #999;
    }
  }
  .tips {
    padding: 40px 0 0 20px;
    font-size: 14px;
    color: #999;
  }
  .w-button {
    width: 75%;
    height: 40px;
    margin: 60px auto 0;
    background: linear-gradient(141deg, #75cecc 0%, #7fdddb 100%);
    border-radius: 21px;
    border: 1px solid #75cecc;
    color: #fff;
    text-align: center;
    line-height: 40px;
  }
}
.picker {
  display: flex;
}
</style>
